package cn.ifafu.ifafu.ui.view

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

/**
 * 自定义 AppBar 组件，样式参考 WoToolbar
 *
 * @param title 标题文本
 * @param modifier Modifier
 * @param navigationIcon 导航图标，默认为返回箭头
 * @param navigationIconContentDescription 导航图标的内容描述
 * @param onNavigationClick 导航图标点击事件
 * @param subtitle 副标题文本
 * @param titleTextStyle 标题文本样式
 * @param subtitleTextStyle 副标题文本样式
 * @param titleColor 标题颜色
 * @param subtitleColor 副标题颜色
 * @param backgroundColor 背景颜色
 * @param contentColor 内容颜色
 * @param elevation 阴影高度
 * @param onTitleClick 标题点击事件
 * @param onSubtitleClick 副标题点击事件
 * @param actions 右侧操作按钮
 */
@Composable
fun WoAppBar(
    title: String,
    modifier: Modifier = Modifier,
    navigationIcon: ImageVector = Icons.AutoMirrored.Filled.ArrowBack,
    navigationIconContentDescription: String? = "返回",
    onNavigationClick: (() -> Unit)? = null,
    subtitle: String? = null,
    titleTextStyle: TextStyle = TextStyle(fontSize = 20.sp, fontWeight = FontWeight.Bold),
    subtitleTextStyle: TextStyle = TextStyle(fontSize = 14.sp),
    titleColor: Color = Color(0xFF222222),
    subtitleColor: Color = Color(0xFF666666),
    backgroundColor: Color = Color.White,
    contentColor: Color = Color.Black,
    elevation: Dp = 4.dp,
    onTitleClick: (() -> Unit)? = null,
    onSubtitleClick: (() -> Unit)? = null,
    actions: @Composable RowScope.() -> Unit = {}
) {
    Surface(
        modifier = modifier
            .fillMaxWidth()
            .height(56.dp),
        color = backgroundColor,
        shadowElevation = elevation,
        tonalElevation = 0.dp
    ) {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(horizontal = 4.dp)
        ) {
            // 导航按钮（左侧）
            if (onNavigationClick != null) {
                IconButton(
                    onClick = onNavigationClick,
                    modifier = Modifier
                        .align(Alignment.CenterStart)
                        .padding(start = 4.dp)
                ) {
                    Icon(
                        imageVector = navigationIcon,
                        contentDescription = navigationIconContentDescription,
                        tint = contentColor
                    )
                }
            }

            // 标题和副标题（居中）
            Column(
                modifier = Modifier
                    .align(Alignment.Center)
                    .padding(horizontal = 56.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                // 标题
                Text(
                    text = title,
                    style = titleTextStyle,
                    color = titleColor,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                    modifier = Modifier
                        .then(
                            if (onTitleClick != null) {
                                Modifier.clickable(onClick = onTitleClick)
                            } else {
                                Modifier
                            }
                        )
                )

                // 副标题
                if (!subtitle.isNullOrEmpty()) {
                    Text(
                        text = subtitle,
                        style = subtitleTextStyle,
                        color = subtitleColor,
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis,
                        modifier = Modifier
                            .then(
                                if (onSubtitleClick != null) {
                                    Modifier.clickable(onClick = onSubtitleClick)
                                } else {
                                    Modifier
                                }
                            )
                    )
                }
            }

            // 操作按钮（右侧）
            Row(
                modifier = Modifier
                    .align(Alignment.CenterEnd)
                    .padding(end = 4.dp),
                horizontalArrangement = Arrangement.End,
                verticalAlignment = Alignment.CenterVertically
            ) {
                actions()
            }
        }
    }
}

/**
 * WoAppBar 的简化版本，只包含标题和导航按钮
 */
@Composable
fun SimpleWoAppBar(
    title: String,
    modifier: Modifier = Modifier,
    onNavigationClick: (() -> Unit)? = null,
    actions: @Composable RowScope.() -> Unit = {}
) {
    WoAppBar(
        title = title,
        modifier = modifier,
        onNavigationClick = onNavigationClick,
        actions = actions
    )
}

@Preview(showBackground = true)
@Composable
fun WoAppBarPreview() {
    Column {
        WoAppBar(
            title = "关于iFAFU",
            subtitle = "副标题",
            onNavigationClick = {},
            actions = {
                TextButton(onClick = {}) {
                    Text("操作操作")
                }
            }
        )
        Spacer(modifier = Modifier.height(8.dp))
        SimpleWoAppBar(
            title = "简化标题",
            onNavigationClick = {}
        )
        Spacer(modifier = Modifier.height(8.dp))
    }
}
